<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击发送ajax</button>
    <script>

        const btn = document.querySelector('button')
        btn.addEventListener('click', () => {
            // 原生发送ajax
            ajax_get()
        })


        // 原生ajax 五步走
        function ajax_get(){
            // 1. 实例化xhr对象  XMLHttpRequest 内置的
            const xhr = new XMLHttpRequest()
            // 2. 设置请求方法和地址 
            xhr.open('get', 'http://ajax-api.itheima.net/api/news')
            // 3. 设置请求头 ==> 可以省略 如果后端需要，就要设置，不需要，设置了也没关系，可以自定义
            xhr.setRequestHeader('myHeader', 'goodHeader')
            xhr.setRequestHeader('otherHeader', 'dogHead')
            // 4. 注册回调函数  
            //  readystatechange  ==> 表示ajax请求的状态改变
            // xhr.readystate ==> 从我们实例化xhr对象开始，就在变化 0-4 值， 4 表示服务器已经把数据返回给我了
            xhr.addEventListener('readystatechange', function(){
                if (xhr.readyState === 4){

                    // 什么时候是成功的请求状态 http状态？200 - 300   304 资源未修改，缓存
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                        console.log(xhr.response)
                    } else {
                        console.log('请求不成功')
                    }

                }
            })

            // 5. 发送请求
            xhr.send()
        }


        // 原生发送 五部
        // 1. 实例化xhr
        // 2. 设置请求方法和接口地址 xhr.open(方法，地址)
        // 3. 设置请求头 ==> 可以省略，看后端需要不
        // 4. 注册回调函数
        // 5. 发送请求
    </script>
</body>
</html>